<template>
  <li class="item" @mouseenter="show = true" @mouseleave="show = false">
    <span>{{ todo.id }}</span> -
    <span>{{ todo.content }}</span> -
    <input type="checkbox" :checked="todo.checked" @change="change(todo.id)"/> -
    <button @click="remove(todo.id)" v-show="show">删除</button>
  </li>
</template>

<script>
export default {
  name: 'item',
  props: {
    todo: Object,
    default: () => ({}),
  },
  data() {
    return {
      show: false,
    };
  },
  methods: {
    change(id) {
      this.$bus.$emit('changeDone', id);
    },
    remove(id) {
      this.$bus.$emit('delTodo', id);
    },
  },
};
</script>

<style scoped>
.item {
  display: flex;
  align-items: center;
  gap: 10px;
}

button {
  margin-left: auto;
}
</style>